<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<el-menu
					default-active="/BikeIndex"
					class="el-menu-demo"
					mode="horizontal"
					@select="handleSelect"
					router
				>
					<el-menu-item index="/BikeIndex"
						><img
							src="@/assets/IndexLogo.jpg"
							alt="logo"
							style="height: 60px"
						/>
						<div style="margin-left: 20px" class="largeFont">Home</div>
					</el-menu-item>
					<div class="flex-grow" />
					<el-sub-menu index="1">
						<template #title>
							<el-icon><Document /></el-icon>
							More Information
						</template>
						<el-menu-item index="/Employee">For Employee</el-menu-item>
						<el-menu-item index="/Employer">For Employer</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="2">
						<template #title>
							<el-icon><Location /></el-icon>
							Guidance
						</template>
						<el-menu-item index="/Guide">How to guides</el-menu-item>
						<el-menu-item index="/Map">Interactive Map</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="3">
						<template #title>
							<el-icon><IconMenu /></el-icon>
							Utils
						</template>
						<el-menu-item index="/Calculator">Cost Calculator</el-menu-item>
						<el-menu-item index="/SocialMedia"
							>Social Media Integration</el-menu-item
						>
					</el-sub-menu>
					<el-menu-item index="/Reviews">
						<el-icon><Tickets /></el-icon> Cycling Review</el-menu-item
					>
				</el-menu>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
			<el-footer class="center">
				<div class="footer"><span>Made By Liweili 2021150161</span></div>
			</el-footer>
		</el-container>
	</div>
</template>

<script lang="ts" setup>
import "element-plus/theme-chalk/display.css";
import { ref } from "vue";
import { Document, Menu as IconMenu, Location } from "@element-plus/icons-vue";

const handleSelect = (key: string, keyPath: string[]) => {
	console.log(key, keyPath);
};
</script>

<style scoped>
.footer {
	background-color: white;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}

.largeFont {
	font-size: larger;
	font-weight: bold;
}

.el-menu-demo {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding-left: 30px;
	padding-right: 30px;
}

.common-layout {
	position: flex;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

@media screen and (min-width: 0px) and (max-width: 900px) {
	.flex-grow {
		position: absolute;
		width: 300px;
		height: 20px;
	}
}

@media screen and (min-width: 900px) and (max-width: 2000px) {
	.flex-grow {
		flex-grow: 1;
		width: 500px;
	}
} ;
</style>

<style scoped>
div {
	border-radius: 5px;
}
</style>
